<div class="loginPasswordInput">
    <label id="loginPasswordLabel" for="loginPassword"></label>
    <input type="password" autofocus ng-model="loginPassword" id="loginPassword" name="loginPassword" required/>

    <div ng-messages="form.loginPassword.$error" class="text-red">
        <p ng-message="required" translate-context="Error" translate>Field required</p>
    </div>

    <div class="two-factor">
        <label
            for="twoFactorCode"
            translate
            translate-context="Two-factor code field">Enter two-factor passcode:</label>

        <two-fa-field
            ng-model="twoFactorCode"
            ng-required="twoFactorRequired"
            autofocus
            id="twoFactorCode"
            name="twoFactorCode"
            placeholder-translate="Two-factor passcode"
            placeholder-translate-context="Two-factor code field"></two-fa-field>

        <div ng-messages="form.twoFactorCode.$error" class="text-red">
            <p ng-message="required" translate-context="Error" translate>Field required</p>
            <p ng-message="minlength" translate-context="Error" translate>The code must contain at least 6 characters</p>
            <p ng-message="maxlength" translate-context="Error" translate>The code is too long, max 8 characters</p>
        </div>
    </div>
</div>
